@import '@common/styles/index.scss';
.post-good-box {
  margin: 0 rem($margin-4n) rem($margin-4n);
  background: #fff;
  .title {
    font-size: $font-size-middle;
    line-height: $font-line-height-small;
    color: $text-color-primary;
  }
  .content {
    display: flex;
    padding: rem($padding-4n);
    background: $body-bg-color;
    border-radius: $border-radius-small;
    .content-left {
      width: 82px;
      height: 82px;
      border-radius: $border-radius-small;
      .image {
        width: 100%;
        height: 100%;
      }
    }
    .content-right {
      display: flex;
      justify-content: center;
      flex-direction: column;
      flex: 1;
      margin-left: $margin-2n;
      margin-right: $margin-2n;
      position: relative;
      .content-title {
        font-size: $font-size-base;
        line-height: $font-line-height-base;
        color: $text-color-regular;
        @include lamp-clamp(2);
      }
      .content-price {
        display: inline-block;
        margin-top: $margin-2n;
        font-size: $font-size-large;
        line-height: $font-line-height-large;
        color: $error-color;
        font-weight: 700;
      }
    }
  }
  .delete-icon {
    position: absolute;
    bottom: 0;
    right: -14px;
    padding: $padding-5;
    :global {
      color: $text-color-secondary;
    }
  }
  .good-add-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 114px;
    background: $text-bg-color;
    border-radius: 5px;
    .good-add-text {
      font-size: 14px;
      line-height: 18px;
      color: $text-color-secondary;
    }
  }
}

.post-good-box.pc {
  margin-left: 0;
  margin-right: 0;
  .content-title {
    max-width: 670px;
  }
  .delete-icon {
    position: absolute;
    bottom: 50%;
    right: 0;
    transform: translate(0, 50%);
  }
}